<template>
	<view style="background-color: #F5F3EE;">
		<dev-navbar :title="title"></dev-navbar>
		<view class="background-cloud">
			<!-- 标题 -->
			<view class="title-box"></view>
			<!-- 红包 -->
			<view class="red-envelope">
				<view class="red-packet-description">
					分享本软件给朋友，可得50个健康豆
				</view>
				<view class="amount-of-healthy-beans">
					{{pointsValue}}
				</view>
				<view class="share-button" @click="getChronicDiseaseAll">
					点击分享给朋友
				</view>

			</view>
		</view>

		<view class="reward">
			<view class="my-reward">
				<view class="reward-information justify-content-l">
					<view class="award-text">
						我的奖励
					</view>
					<view class="align-items-l" @tap="promotionDetails()">
						<dev-svg-image width="24" height="26" mode="image"
							imageUrl="shoppingMall/8EB23D4F2516400BB6D4A01DD0762129.png"></dev-svg-image>
						<text class="detail-text">我的推广明细</text>
					</view>
				</view>

				<view class="justify-content-l" style="margin-top: 40rpx;">
					<view class="invitation-progress">
						<dev-svg-image width="110" height="110" mode="image"
							imageUrl="shoppingMall/5E61DA13045B4B79BA82A509BA8C37F9.png"></dev-svg-image>
						<view class="progress-text">
							<text class="small-text">健康豆</text><text class="big-text">{{pointValue || '0'}}</text>
						</view>
					</view>
					<view class="invitation-progress">
						<dev-svg-image width="110" height="110" mode="image"
							imageUrl="shoppingMall/DD9F4EE4E2C94CDDBA36B025E483769E.png"></dev-svg-image>
						<view class="progress-text">
							<text class="small-text">已邀请</text><text class="big-text">{{invitedNum || '0'}}</text><text class="small-text">人</text>
						</view>
					</view>
					<view class="invitation-progress">
						<dev-svg-image width="110" height="110" mode="image"
							imageUrl="shoppingMall/E37D811F5F6D4C108F53F871E85DE0EF.png"></dev-svg-image>
						<view class="progress-text">
							<text class="small-text">已接受</text><text class="big-text">{{acceptedNum || '0'}}</text><text class="small-text">人</text>
						</view>
					</view>

				</view>


			</view>
		</view>
		<u-select v-model="show" :list="list" title="请选择" cancel-color="#2EA7E0" confirm-color="#2EA7E0" @confirm="getPoterByChronicDisId"></u-select>
		<!-- <dev-iphone-bottom bgColor="#F5F3EE"></dev-iphone-bottom> -->
		<u-popup v-model="popupShow" mode="center">
			<image class="poster-image" :src="path" @tap="showImage(path)" mode="widthFix"></image>
            <!-- <view @tap="savePoster(path)" class="btn-class">
                保存海报
            </view>
            <view @tap="shareFriend(path)" class="btn-class">
                 分享朋友
             </view> -->

		</u-popup>

		<l-painter :board="poster" isCanvasToTempFilePath pathType="url" @success="onSuccess"
				   custom-style="position: fixed; left: 200%" />
		<view class="lF2-style">
			{{path}}
			<l-f2 ref="chart"></l-f2>
		</view>
	</view>
</template>

<script>

import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"

import uSelect from "@/uview-ui/components/u-select/u-select.vue"

import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	import lF2 from '@/uni_modules/lime-f2/components/l-f2/l-f2.vue';
	export default {
		components: {
			lF2,
			uPopup,
			uSelect,

		},
		data() {
			return {
				popupShow:false,
				path:'',
				title: '分享有礼	',
				list: [{
						value: '1',
						label: '生成血压海报',
					    extra:''
					},
					{
						value: '2',
						label: '生成血糖海报',
						extra:''
					}
				],
				show: false, //分享选择
				pointValue:0,
				invitedNum:0,
				acceptedNum:0,
				pointsValue:50,
				tempFilePath: '',
				path: '',
				poster: {
					css: {
						width: "650rpx",
						height: "1210rpx",
						paddingBottom: "40rpx",
						background: "#EDEDF5"
					}
				},
				shareView: {}, //获取分享view样式
				posterData: {} //获取分享海报样式
			};
		},
		onLoad() {
			this.shareProfit();
			// 图表
			this.$refs.chart.init(config => {
				config.padding = ['auto', 14, 'auto', 24]
				const chart = new F2.Chart(config);
				
				return chart;
			});
		},

		methods: {
           //保存海报
           savePoster(){
               var that = this
                   wx.showLoading({
                     title: '正在保存...',
                     mask: true
                   })
                   setTimeout(() => {
                     wx.saveImageToPhotosAlbum({
                       filePath: that.path,
                       success(res) {
                         wx.showToast({
                           title: '保存成功',
                           icon: 'none'
                         })
                         setTimeout(() => {
                           wx.hideLoading()
                           that.setData({
                             isPhotoModel: true,
                             isCanvas: true
                           })
                         }, 300)
                       },
                       fail() {
                         wx.showToast({
                           title: '保存失败，请刷新页面重试',
                           icon: 'none'
                         })
                         setTimeout(() => {
                           wx.hideLoading()
                           that.setData({
                             isPhotoModel: true,
                             isCanvas: true
                           })
                         }, 300)
                       }
                     })
                   }, 2500)
           },
           //分享朋友
           shareFriend(path){
               console.info(path,"path");
                //分享
               wx.showShareImageMenu({
                 path: path
               }).then(res => {
								console.warn('test', res);
							 }).catch(err => {
								console.warn('test2', err);
							 });

           },
			// 海报成功生成
			onSuccess(e) {
				this.path = e;
				this.shareFriend(this.path)
			},
			//点击放大
			showImage(url) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: [url] // 需要预览的图片http链接列表
				})
			},
			shareProfit() {
				this.$https.get(global.apiUrls.shareProfit, {}).then(res => {
					if (res.data.code == 1000) {
						this.pointValue = res.data.result.pointValue;
						this.invitedNum = res.data.result.invitedNum;
						this.acceptedNum = res.data.result.acceptedNum;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				});
			},

			getChronicDiseaseAll(){
				this.$https.get(global.apiUrls.getChronicDiseaseAll, {}).then(res => {
					if (res.data.code == 1000) {
						this.show = true;
						let result = res.data.result;
						let listArray = [];
						for(let i=0;i<result.length;i++){
							let listObj = {};
							listObj.label = result[i].indicName;
							listObj.value = result[i].chronicDisId;
							listObj.extra = result[i].itemCode;
							listArray.push(listObj);
						}
						this.list = listArray;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			confirmChrio(e){
				// 跳转分享页面
				console.log(e,"ertyuioiuytyui");
			},
			promotionDetails() {
				this.$urouter.navigateTo({
					url: '/pagesMy/my/promotionDetails/index',
					key: '',
					params: {}
				});
			},
			async canvasToTemp(data) {
				console.info(data,"canvasToTemp data")
				this.poster = {
					css: {
						width: "650rpx",
						height: "1100rpx",
						paddingBottom: "40rpx",
						background: "#EDEDF5"
					}
				}
				let res = await this.$refs.chart.canvasToTempFilePath();
				let tempFilePath = res.tempFilePath,
						_this = this;
				uni.uploadFile({
					url: global.UPLOAD_IMAGE_URL,
					filePath: tempFilePath,
					fileType: 'image',
					name: 'upfile',
					header: {
						'Authorization':uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'),
						userSource: 1, //用户类型 1:C端用户  2:员工
					},
					success: (resdata) => {
						uni.hideToast();
						tempFilePath = JSON.parse(resdata.data).result.url;
						if(data.diseaseNousVOS.length == 0){//没数据 生成不了bug
							for(let i = 0;i<2;i++){
								data.diseaseNousVOS[i] = {}
							}
						}
						_this.popupShow = true
						_this.poster = {
							css: {
								width: "650rpx",
								// height: "1250rpx",
								paddingBottom: "40rpx",
								background: "#EDEDF5"
							},
							views: [{
								src: "https://static.bsyjk.cn/logo/09BC7A2243AA4753898C2494929F6153.png",
								type: "image",

								css: {
									background: "#fff",
									objectFit: "cover",
									marginLeft: "40rpx",
									marginTop: "40rpx",
									width: "84rpx",
									boxSizing: "border-box",
									height: "100rpx",
								}
							},
								{
									type: "text",
									text: data.storeName||'',
									css: {
										objectFit: "cover",
										color: "#0F1A50",
										textAlign: 'center',
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "400rpx",
										fontSize: "38rpx",
										boxSizing: "border-box",
										height: "100rpx",
									}
								},
								{
									type: "image",
									src: "https://static.bsyjk.cn/marshallingbg/89FBD3719ACA4294A181BBF2DF18A1B8.png",
									css: {
										marginLeft: "40rpx",
										marginTop: "-40rpx",
										width: "580rpx",
										height: "586rpx",
									}
								},
								{
									type: "view",
									css: {
										marginLeft: "30rpx",
										marginTop: "-320rpx",
										width: "590rpx",
										height: "414rpx",
										background: "#0F1A50",
										borderRadius: '22rpx'
									},
									views: [
										{
											type: "image",
											src: _this.$basejs.httpHttps(tempFilePath), //生成7天数据
											css: {
												width: "480rpx",
												height: "374rpx",
												marginLeft: "40rpx",
												marginTop: "0rpx",

											}
										},
										{
											type: "text",
											text: '说明：图表数据仅供参考，建议记录7天以上数据更加精准。',
											css: {
												objectFit: "cover",
												color: "#AFBCFB",
												textAlign: 'left',
												marginLeft: "54rpx",
												marginTop: "0rpx",
												width: "590rpx",
												fontSize: "14rpx",
												boxSizing: "border-box",
											},
										}
									]
								},
								{
									type: "view",
									css: {
										marginLeft: "30rpx",
										marginTop: "16rpx",
										width: "590rpx",
										height: "240rpx",
										background: "#0F1A50",
										borderRadius: '22rpx'
									},
									views: [{
										type: "text",
										text: '高血压科普小常识',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "18rpx",
											width: "590rpx",
											fontSize: "28rpx",
											boxSizing: "border-box",
										},
									}, {
										type: "view",
										css: {
											marginLeft: "27rpx",
											marginTop: "18rpx",
											width: "540rpx",
											borderTop: "1px dashed #979797"
										},
									}, {
										type: "text",
										text: '1.' + data.diseaseNousVOS[0]? data.diseaseNousVOS[0].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "550rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
											height:"24rpx",
											lineHeight:"24rpx",
											textOverflow: "ellipsis",
											whiteSpace: "nowrap",
											overflow: "hidden"

										},
									}, {
										type: "text",
										text: '2.' +data.diseaseNousVOS[1]? data.diseaseNousVOS[1].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "550rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
											height:"24rpx",
											lineHeight:"24rpx",
											textOverflow: "ellipsis",
											whiteSpace: "nowrap",
											overflow: "hidden"
										},
									}, {
										type: "text",
										text: '3.' +data.diseaseNousVOS[2]? data.diseaseNousVOS[2].nousContent:'',
										css: {
											objectFit: "cover",
											color: "#AFBCFB",
											textAlign: 'left',
											marginLeft: "24rpx",
											marginTop: "14rpx",
											width: "550rpx",
											fontSize: "20rpx",
											boxSizing: "border-box",
											height:"24rpx",
											lineHeight:"24rpx",
											textOverflow: "ellipsis",
											whiteSpace: "nowrap",
											overflow: "hidden"
										},
									}]
								},
								{
									type: "text",
									text: '这个软件可以清晰准确的记录着人们的血压，科普人们健康小常识，你也快来试一试吧！',
									css: {
										objectFit: "cover",
										color: "#0F1A50",
										textAlign: 'left',
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "350rpx",
										fontSize: "22rpx",
										boxSizing: "border-box",
										height: "100rpx",
									}
								},
								{
									src: _this.$basejs.httpHttps(data.qrCodeUrl),
									type: "image",
									css: {
										background: "#fff",
										objectFit: "cover",
										marginLeft: "40rpx",
										marginTop: "40rpx",
										width: "150rpx",
										height: '150rpx',
										boxSizing: "border-box",
									}
								},
							]
						}
					},
					fail: (err) => {
						uni.hideToast();
					}
				});
				_this.tempFilePath = tempFilePath
        //         setTimeout(e => {
        //         	this.shareFriend(this.path)
        //         }, 2000)

			},
			posterfun(data) {
				let cdata = [], //收缩压
						cdata2 = [], //舒张压
						dataVOS = data.dataVOS,
						_this = this; //血压数组
				for (let i = 0; i < dataVOS.length; i++) {
					let day = this.$basejs.dataTypeday(dataVOS[i].record).y + '-' + this.$basejs.dataTypeday(dataVOS[i]
							.record).r
					cdata.unshift({
						day: day,
						type: '收缩压',
						value: dataVOS[i].first
					})
					cdata2.unshift({
						day: day,
						type: '舒张压',
						value: dataVOS[i].second,
					})

				}
				cdata = cdata.concat(cdata2)
				console.info(this.$refs.chart, cdata,"this.$refs.chart65");

				_this.$refs.chart.reset(chart => {
					chart.clear() // 清理所有
					chart.source(cdata, {
						value: {
							tickCount: 5,
							min: 0
						},
						day: {
							range: [0, 1]
						}
					});
					chart.axis('day', {
						label: {
							fill: '#AFBCFB'
						}
					});
					chart.axis('value', {
						label: {
							fill: '#AFBCFB'
						}
					});

					chart.line().position('day*value').color('type', [
						'#17DBFF',
						'#0ED000'
					])
							.shape('smooth');
					chart.point().position('day*value')
							.color('type', ['#17DBFF', '#0ED000'])
							.shape('smooth').style({
						stroke: '#fff',
						lineWidth: 1
					});
					chart.legend({
						itemWidth: 120,
						offsetY: 0,
						offsetX: 100

					});
					chart.guide().text({
						position: ['6%', '-14%'],
						content: '血压走势',
						style: {
							fill: '#AFBCFB', // 文本颜色
							fontSize: '20', // 文本大小
						}, // 文本的图形样式属性
					});

					chart.render();
					return chart;
				});
				setTimeout(e => {
					this.canvasToTemp(data) //海报线
				}, 500)
				// 在H5平台下，tempFilePath 为 base64
			},
			getPoterByChronicDisId(e) {
				console.log(e,"12222222");
				let code = e[0].extra;
				let chronicDisId = e[0].value;
				console.log(chronicDisId,"chronicDisId");
				console.log(code,"code");
				uni.showLoading({
					title: '生成海报中',
					duration: 3000
				});
				let sendData = {
					indicItemCode: code,
					chronicDisId: chronicDisId
				}
				this.$api.get(global.apiUrls.getPoterByChronicDisId, sendData).then(res => {
					if (res.data.code == 1000) {
						this.posterData = res.data.result
						this.posterfun(this.posterData)
					} else {
						uni.hideToast()
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 3000
						});
					}
				})
			},
			getByCode(code) {
				let sendData = {
					indicItemCode: code
				}
				this.$api.get(global.apiUrls.getByCode, sendData).then(res => {
					if(res.data.code == 1000){
						this.$emit('shareFun',res.data.result)
						this.shareView = res.data.result
					}
				})
			}
		}
	}
</script>

<style lang="scss">
    .btn-class {
        font-size: 30rpx;
        height: 80rpx;
        align-content: center;
        text-align:center;
        line-height: 80rpx;
        border-radius: 100rpx;
        color: #ffffff;
        border-color: #2979ff;
        background-color: #2979ff;
    }
	.background-cloud {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 980rpx;
		background-image: url('http://static.bsyjk.cn/shoppingMall/2DDA56320B754E338E88C8295E591E7E.png');
		background-size: 100% 100%;

		.title-box {
			margin-top: 110rpx;
			width: 616rpx;
			height: 80rpx;
			background-image: url('http://static.bsyjk.cn/shoppingMall/2044EB789D5043BCB2F56D5166B1A61B.png');
			background-size: 100% 100%;
		}

		.red-envelope {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 658rpx;
			height: 652rpx;
			background-image: url('http://static.bsyjk.cn/shoppingMall/2DD086384B774CBAB2AEAEE8BD48D638.png');
			background-size: 100% 100%;
			margin-top: 95rpx;

			.red-packet-description {
				margin-top: 52rpx;
				width: 415rpx;
				height: 66rpx;
				background: #FFDDC1;
				border-radius: 33rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FF333A;
				line-height: 66rpx;
				text-align: center;
			}

			.amount-of-healthy-beans {
				font-size: 160rpx;
				font-weight: 500;
				color: #FF333A;
			}

			.share-button {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF333A;
				margin-top: 150rpx;
			}
		}
	}

	.reward {
		padding: 1rpx 30rpx;
		width: 750rpx;
		height: 725rpx;
		background-image: url('http://static.bsyjk.cn/shoppingMall/1214B4E27BF14E3DB843BFB9857A4A9B.png');
		background-size: 100% 100%;
		margin-top: -255rpx;

		.my-reward {
			margin-top: 250rpx;
			width: 690rpx;
			height: 356rpx;
			background: #FFF8F8;
			border-radius: 33rpx;
			padding: 30rpx;

			.reward-information {
				.award-text {
					font-size: 38rpx;
					font-weight: 600;
					color: #FF7952;
				}

				.detail-text {
					font-size: 26rpx;
					font-weight: 500;
					color: #FF9E27;
					margin-left: 10rpx;
					text-decoration: underline;
				}
			}

			.invitation-progress {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.progress-text{
					margin-top: 26rpx;
				}

				.small-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF7952;
				}

				.big-text {
					font-size: 50rpx;
					font-weight: 500;
					color: #FF7952;
				}
			}
		}
	}
	.lF2-style {
		position: fixed;
		left: -9999rpx;
		top: -9999rpx
	}
</style>
